<template>
	<div class="header">
		<div class="header_tou" >
			<ul class="header_touul">
				<li class="shenma">
					深码数据
				</li>
				<li class="sa">
					<router-link replace to="/index">首页</router-link>
				</li>
				<li class="sa">
					<router-link  to="/home/0">抖音版</router-link>
				</li>
				<li class="sa">
					<router-link  to="/home/1">快手版</router-link>
				</li>
				<li class="sa">
					<router-link  to="/home/2">B站版</router-link>
				</li>
				<li class="sa">
					<router-link  to="/home/3">微博版</router-link>
				</li>
				<li class="sa">
					<router-link replace to="/shujuyanjiu">数据研究</router-link>
				</li>
				<li class="sa">
					<router-link replace to="/lianxiwowen">联系我们</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		mounted:function(){
			//导航hover效果
			$(".header_touul li").click(function(){
				$(this).children("a").addClass("active")
				$(this).siblings().children("a").removeClass("active");
			})
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.header{
		// position: fixed;
		// top: 0;
		// left: 0;
		// width: 100%;
		// box-sizing: border-box;
		// z-index: 100;
		background-color: #fff;
		
		@keyframes bounce-in-top {
		  0% {
		    transform: translateY(-500px);
		    animation-timing-function: ease-in;
		    opacity: 0;
		  }
		  38% {
		    transform: translateY(0);
		    animation-timing-function: ease-out;
		    opacity: 1;
		  }
		  55% {
		    transform: translateY(-65px);
		    animation-timing-function: ease-in;
		  }
		  72% {
		    transform: translateY(0);
		    animation-timing-function: ease-out;
		  }
		  81% {
		    transform: translateY(-28px);
		    animation-timing-function: ease-in;
		  }
		  90% {
		    transform: translateY(0);
		    animation-timing-function: ease-out;
		  }
		  95% {
		    transform: translateY(-8px);
		    animation-timing-function: ease-in;
		  }
		  100% {
		    transform: translateY(0);
		    animation-timing-function: ease-out;
		  }
		}
		@keyframes fade-in-top {
		  0% {
		    transform: translateY(-50px);
		    opacity: 0;
		  }
		  100% {
		    transform: translateY(0);
		    opacity: 1;
		  }
		}
		@keyframes fade-in-bottom {
		  0% {
		    transform: translateY(50px);
		    opacity: 0;
		  }
		  100% {
		    transform: translateY(0);
		    opacity: 1;
		  }
		}
		
		.header_tou{
			margin-top:2% ;
			padding-bottom:1% ;
			.header_touul{
				width: 75%;
				list-style: none;
				margin: auto;
				display: flex;
				justify-content: space-around;
				align-items: center;
				background-color: #fff;
				
				.shenma{
					color: #000;
					font-size: 0.6rem;
					font-weight: 600;
				}
				
				
				li{
					float: left;
					cursor: pointer;
					font-size: 0.4rem;
					padding: 1% 1% 1% 1%;
					color: #333;
					a{
						text-decoration: none;
						font-size: 0.4rem;
						color: #333;
					}
					.router-link-active{
						color: #1890ff;
					}
					a:hover{
						color: #1890ff;
					}
				}
				li:nth-of-type(1){
					animation: bounce-in-top 1.2s both;
				}
				li:nth-of-type(2){
					// animation: bounce-in-top 1s both;
					animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
				}
				li:nth-of-type(3){
					// animation: bounce-in-top 1.2s both;
					animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
				}
				li:nth-of-type(4){
					// animation: bounce-in-top 1.4s both;
					animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
				}
				li:nth-of-type(5){
					// animation: bounce-in-top 1.6s both;
					animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
				}
				li:nth-of-type(6){
					// animation: bounce-in-top 1.8s both;
					animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
				}
				li:nth-of-type(7){
					// animation: bounce-in-top 2s both;
					animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
				}
				li:nth-of-type(8){
					// animation: bounce-in-top 2.2s both;
					animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
				}
			}
			.header_touul::after{
				content: "";
				display: block;
				clear: both;
			}
		}
	}
</style>
